﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>


<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="${ctx}/common/common.css">
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/index.css"/>
    <link rel="stylesheet" href="${ctx}/common/plugins/ztree/zTreeStyle.css" type="text/css">

</head>
<body class="layui-layout-body" style="overflow: auto;color:white">
<!--主体内容层-->
<div class="layui-fluid layui-add-fluid  layui-add-body">
    <div class="layui-row layui-top">
        <div class="layui-col-md3  layui-add-select">
            <form class="layui-form" action="">
                <div class="layui-form-item layui-sel">
                    <label class="layui-form-label">黑龙江省</label>
                    <div class="layui-input-block"   id="currentArea">
                        <%--当前选中的省--%><div class="layui-input-k">黑龙江省</div>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-col-md9 layui-add-md9">
            <div class="layui-row layui-index-toprow layui-col-spac">
                <div class="layui-col-md3 ">
                    <%--<img src="${ctx}/common/imgs/bzt2.jpg"/>--%>
                    <div id="entCount" class="img" style="width:89px;height:83px;"></div>
                    <ul class="layui-list">
                          <li class="first">入住生产企业</li>
                          <li>累计：${entCount}</li>
                          <li class="caramel">当月：${currentMonthEntCount}</li>
                    </ul>
                </div>
                <div class="layui-col-md3 ">
                    <div id="labelCount" class="img" style="width: 89px;height:83px;"></div>
                     <ul class="layui-list">
                          <li class="first">标签发放量</li>
                          <li>累计：${labelCount}</li>
                          <li class="green">当月：${currentMonthLabelCount}</li>
                     </ul>
                    
                </div>
                <div class="layui-col-md3 ">
                    <div id="productCount" class="img" style="width: 89px;height:83px; "></div>
                    <ul class="layui-list">
                          <li class="first">产品数量</li>
                          <li>累计：${productsCount}</li>
                          <li class="red">当月：${currentMonthProductCount}</li>
                    </ul>
                </div>
                <div class="layui-col-md3 ">
                    <div id="accountCount" class="img" style="width: 89px;height:83px;"></div>
                     <ul class="layui-list">
                          <li class="first">在线人员数量</li>
                          <li>累计：${personnalCount}</li>
                          <li class="blue">当月：${currentMonthPersonnalCount}</li>
                        </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-bottom">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md3 " style="overflow: hidden;">

                <div class="layui-card">
                    <div class="layui-card-body">
                        <ul class="layuiadmin-card-status layuiadmin-home2-usernote ">
                            <li class="layui-add-li">
                                <div class="border">
                                    <p><i>活跃数量</i>
                                        <span class="layuiadmin-span-color"><strong>380</strong>当日</span>
                                    </p>
                                </div>

                            </li>
                            <li class="layui-add-li">
                                <div class="border">
                                    <%--<img src="${ctx}/common/imgs/zxt.jpg"/>--%>
                                    <div id="salesOrdersCount" style="width:100%;height:240px;"></div>
                                </div>

                            </li>
                            <li class="layui-add-li">
                                <div class="border">
                                   <%-- <img src="${ctx}/common/imgs/bzt1.jpg"/>--%>
                                    <div id="allEntCount" style="width: 100%;height:240px;"></div>
                                </div>

                            </li>
                        </ul>

                    </div>
                </div>

            </div>

            <div class="layui-col-md6 ditu">
                <div class="layui-add-li">
                    <div class="border">
                        <div class="layui-left-nav">
                            <div class="layui-card">
                                <div class="layui-card-header">黑龙江省企业分布情况</div>
                                <div class="layui-card-body">
                                    <div class="layui-collapse" lay-accordion="">
                                        <div class="layui-colla-item">
                                            <h2 class="layui-colla-title" style="color: #fff">区域
                                                <!-- <i class=" layui-colla-icon"></i> -->
                                            </h2>
                                            <div class="layui-colla-content layui-show">
                                                <ul id="treeDemo" class="ztree"></ul>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <!--左侧列表end-->
                        </div>
                        <div class="layui-center-layer" >
                            <ul class="layui-add-ti">
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <div class="layui-center-position">
                                <img src="${ctx}/common/imgs/ditu.png" />

                                <a class="layui-btn demo" style="position: absolute; top:-1%; left: 19%; " data-type="test5">大兴安岭</a>
                                <a class="layui-btn demo" data-type="test5" style="position: absolute; top:27%; left: 41%; ">黑河市</a>
                                <a class="layui-btn demo" data-type="test5" style="position: absolute; top:46%; left: 30%; ">齐齐哈尔市</a>
                                <a class="layui-btn demo" data-type="test5" style="position: absolute; top:55%; left: 46%; ">绥化市</a>
                                <a class="layui-btn demo" data-type="test5" style="position: absolute; top:62%; left: 30%; ">大庆市</a>
                                <a class="layui-btn demo" data-type="test5" style="position: absolute; top:69%; left: 51%; ">哈尔滨市</a>
                                <a class="layui-btn demo" data-type="test5" style="position: absolute; top:75%; left: 66%; ">牡丹江市</a>
                                <a class="layui-btn demo" data-type="test5" style="position: absolute; top:45%; left: 58%; ">伊春市</a>
                                <a class="layui-btn demo" data-type="test5" style="position: absolute; top:44%; left: 68%; ">鹤岗市</a>
                                <a class="layui-btn demo" data-type="test5" style="position: absolute; top:39%; left: 88%; ">佳木斯市</a>
                                <a class="layui-btn demo" data-type="test5" style="position: absolute; top:51%; left: 86%;">双鸭山市</a>
                                <a class="layui-btn demo" data-type="test5" style="position: absolute; top:67%; left: 70%; ">七台河市</a>
                                <a class="layui-btn demo" data-type="test5" style="position: absolute; top:69%; left: 80%; ">鸡西市</a>


                            </div>
                            <div id="test1" class="layui-text layui-add-text" style="display: none;padding: 10px; color: red; z-index: 99999999;">
                                <p>哈尔滨市辖区有9个区、7个县，2个县级市企业分布<b>占全省21.8%</b></p>
                                <p>
                                    <a href="">南岗</a>
                                    <a href="">岛外</a>
                                    <a href="">香坊</a>
                                    <a href="">道理</a>
                                    <a href="">南岗</a>
                                    <a href="">岛外</a>
                                    <a href="">香坊</a>
                                    <a href="">道理</a>
                                </p>


                            </div>

                        </div>


                    </div>
                </div>


            </div>
            <div class="layui-col-md3">
                <div class="layui-card">

                    <div class="layui-card-body">
                        <ul class="layuiadmin-card-status layuiadmin-home2-usernote">
                            <li class="layui-add-li">
                                <div class="border">
                                    <%--<img src="${ctx}/common/imgs/bzt2.png"/>--%>
                                    <div id="purchaseInfoCount" style="width: 100%;height:176px;"></div>
                                    <div id="purchaseInfoCountPie" style="width: 100%;height:236px;"></div>
                                   <%-- <img src="${ctx}/common/imgs/3.png"/>--%>
                                </div>
                            </li>
                            <li class="layui-add-li">
                                <div class="border" >
                                    <a class="sy-a" >
                                         <img src="${ctx}/common/imgs/22.png"/>
                                    </a>
                                   
                                </div>
                            </li>
                        </ul>


                    </div>

                </div>


            </div>
        </div>

    </div>


</div>

<script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>
<script src="${ctx}/common/plugins/jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script src="${ctx}/common/plugins/ztree/jquery.ztree.core.js"></script>

<script>
    layui.use('layer', function(){
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

        //触发事件
        var active = {
            test5: function(){
                var odiv=this
                var demos=document.getElementsByClassName("demo");
                for(var i=0 ;i<demos.length;i++){
                    demos[i].style.color="white"
                }
                this.style.color="#e90001"
                this.style.fontSize="12px"
                layer.open({
                    title:'',
                    type: 1,
                    // skin: 'layui-layer-rim',
                    fixed: false,
                    area: ['320px', '130px'],
                    skin: 'layer-bg',
                    shade: 'background-color: rgba(0,0,0,.5)',
                    shadeClose: true, //开启遮罩关闭
                    offset: [odiv.offsetTop+35,odiv.offsetLeft-260], //右下角弹出
                    content: $('#test1'),


                });



            }



        };
        $('.demo').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
            // $(this).addClass("active");
        });
    });





    //--------------地区树------------------------------------
    var setting = {
        data: {
            simpleData: {
                enable: true
            }
        },
        view:{
            showLine:false,
            showIcon:false
        },
        callback: {
            onClick: clickNode,
            beforeExpand: zTreeBeforeExpand
        }
    };
    var zNodes =eval('('+'${areaList}'+')');
    var zTree=$.fn.zTree.init($("#treeDemo"), setting, zNodes);
    function clickNode(event, treeId, treeNode){
        document.getElementById("currentArea").innerHTML=treeNode.name
        window.location.href='${ctx}/console?area='+treeNode.id
    }
    function zTreeBeforeExpand(){
        zTree.expandAll(false);
        //expandNode(zTree1.getNodes()[0],true,false);
    }

    //-------------------------饼状图-------------------
    /*
     * 入住生产企业
     */
    var pie1Option = pieOptionFun({
                                    //text:'入住生产企业',
                                    //textStyle:{
                                      //  color:'#ffcc00',
                                      //  fontSize:"14"
                                    //},
                                    right:'5%'
                                }, ["累计", "当月"], [{name: '累计', value:'${entCount}'}, {
                                    name: '当月',
                                    value:'${currentMonthEntCount}'
                                }],"70%",['50%', '50%'],'50%',['#ffcc00','#c47b36']);
    var entCountChart = echarts.init(document.getElementById('entCount'));
    entCountChart.setOption(pie1Option, true);

    /**
     * 标签发放数量
     * */
    var pie2Option = pieOptionFun({
       // text:'标签发放数量',
        //textStyle:{
        //    color:'#33ccff',
        //    fontSize:"14"
        //},
        right:'5%'
    },  ["累计", "当月"], [{name: '累计', value:'${labelCount}'}, {
        name: '当月',
        value:'${currentMonthLabelCount}'
    }],"70%",['50%', '50%'],'50%',['#00ffcc','#008613']);
    var labelCountChart = echarts.init(document.getElementById('labelCount'));
    labelCountChart.setOption(pie2Option, true);

    /**
     *产品数量
     * */
    var pie3Option = pieOptionFun({
       // text:'产品数量',
        //textStyle:{
         //   color:'#ff3333',
        //   fontSize:"14"
       // },
        right:'5%'
    },  ["累计", "当月"], [{name: '累计', value:'${productsCount}'}, {
        name: '当月',
        value:'${currentMonthProductCount}'
    }],"70%",['50%', '50%'],'50%',['#e90001','#fe1699']);
    var productCountChart = echarts.init(document.getElementById('productCount'));
    productCountChart.setOption(pie3Option, true);

    /**
     *在册人员数量
     * */
    var pie4Option = pieOptionFun({
        //text:'在册人员数量',
       // textStyle:{
        //    color:'#0066cc',
          //  fontSize:"14"
        //},
        right:'5%'
    }, ["累计", "当月"], [{name: '累计', value: '${personnalCount}'}, {
        name: '当月',
        value: '${currentMonthPersonnalCount}'
    }],"70%",['50%', '50%'],'50%',['#00a8fe','#b8e7ff']);
    var accountCountChart = echarts.init(document.getElementById('accountCount'));
    accountCountChart.setOption(pie4Option, true);


    /**
     *生产企业采购订单笔数统计
     * */
    var spurchasePieList =${empty purchaseInfoCountList?[]:purchaseInfoCountList};
    var xDatal3 = [];
    var yDatal3 = [];
    for (var i = 0; i < spurchasePieList.length; i++) {
        xDatal3.push({name: spurchasePieList[i].create_time.substr(spurchasePieList[i].create_time.indexOf("-") + 1)+"月",value:spurchasePieList[i].num});
        yDatal3.push(spurchasePieList[i].create_time.substr(spurchasePieList[i].create_time.indexOf("-") + 1)+"月")
    }
    var pie5Option = pieOptionFun({},  yDatal3, xDatal3,['50%', '70%'],['50%', '50%'],'50%',['#3c9','#34cc3a','#ccb533','#cc8534','#cc5e34']);
    var purchaseInfoCountPieChart = echarts.init(document.getElementById('purchaseInfoCountPie'));
    purchaseInfoCountPieChart.setOption(pie5Option, true);

    /**
     *注册数量
     * */
    var pie6Option = pieOptionFun({
        text:'注册数量',
        textStyle:{
            color:'#fff',
            fontSize:"14",
            
        }
    },  
   
    ["累计", "当月"], [{name: '累计', value: '${accountCount}'},
        {
        name: '当月',
        value: '${currentMonthAccountCount}'
    }],"80%",['55%', '50%'],'0',['#7c42d1','#1c81d8'],true);
   
    var allEntCountChart = echarts.init(document.getElementById('allEntCount'));
    allEntCountChart.setOption(pie6Option, true);


    /**
     * 饼状图参数
     * @param titleJson 标题属性json
     * @param legendData legend数组 右侧显示的小方块
     * @param seriesData series对象数组 [{name:'',value:''}] 显示出来的图标数据
     * @param myRadius 设置空心圆大小
     * @param center 圆图的位置[left,top]
     * @param legendLeft 右侧方块提示的位置 80%
     * @param colorArr 饼状图颜色数组
     * */
    function pieOptionFun(titleJson, legendData, seriesData,myRadius,center,legendLeft,colorArr,isLegend) {
        return {
            title: titleJson,
            legend: {//右侧显示的数据
                type:'plain',
                show:isLegend,
                left: legendLeft,
                top: 20,
                orient: 'vertical',
                textStyle:{
                    color:"#ffffff"
                },
                data:legendData,//,右侧显示的
                formatter: function (name) { // 使用回调函数
                    var num=0;
                    for(var i=0 ;i<seriesData.length;i++){
                        if(seriesData[i].name==name){
                            num=seriesData[i].value
                        }
                    }
                    return  name+":"+num;
                }
            }, 
            series: [//饼状图
                {

                    label: {
                        normal: {
                            position: 'inner'
                        }
                    },
                    center: center,
                    type: 'pie',
                    radius: myRadius,
                    data: seriesData//饼状图数据
                }
            ],
            color: colorArr
        };
    }
    //-----------------柱状图-------------------------
    var salesList =${empty salesOrdersCountList?[]:salesOrdersCountList};
    var xDatal = [];
    var yDatal = [];
    for (var i = 0; i < salesList.length; i++) {
        xDatal.push(salesList[i].create_time.substr(salesList[i].create_time.indexOf("-") + 1)+"月")
        yDatal.push(salesList[i].num)
    }

    var salesOrdersCountChart = echarts.init(document.getElementById('salesOrdersCount'));
    salesOrdersCountChart.setOption(barOptionFun(xDatal, yDatal), true);
    /**
     * 纵向柱状体
     * @param xData
     * @param yData
     * @returns
     * */
    function barOptionFun(xData, yData) {
        return {
            title:{
                text:'生产企业销售订单笔数统计',
                textStyle:{
                    color:'#ffffff',
                    fontSize:"14",
                    left:'center'
                }
            },
            
            //color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                    type: 'category',
                    data: xData,
                    inverse: true,
            
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'solid',
                            color: '#545454',//左边线的颜色
                            width:'2'//坐标线的宽度
                        }
                       
                  
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff',//坐标值得具体的颜色

                        }
                    }

                }],
            yAxis: [{
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            type: 'solid',
                            color:'#545454',
                            width:'2'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                }],
            series: [{
                    name: '销售订单笔数',
                    type: 'bar',
                    barWidth: '60%',
                    data: yData,
                    itemStyle: {
                        normal: {
                            // 随机显示
                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
                          
                            // 定制显示（按顺序）
                            color: function(params) { 
                                var colorList = ['#3efffe','#4ea7df','#9178f8','#9f45ff','#7368b6', '#55c7f9','#cccbd1','#00cbeb']; 
                                return colorList[params.dataIndex] 
                            }
                        },
                    },
                    label:{
                        normal:{
                            show:true,
                            position:'top'
                        }
                    }
                  
                }]
        }
    };

    var spurchaseList =${empty purchaseInfoCountList?[]:purchaseInfoCountList};
    var xDatal2 = [];
    var yDatal2 = [];
    for (var i = 0; i < spurchaseList.length; i++) {
        xDatal2.push(spurchaseList[i].create_time.substr(spurchaseList[i].create_time.indexOf("-") + 1)+"月")
        yDatal2.push(spurchaseList[i].num)
    }

    var purchaseInfoCountChart = echarts.init(document.getElementById('purchaseInfoCount'));
    purchaseInfoCountChart.setOption(barOptionTransverseFun(xDatal2, yDatal2), true);


    /**
     * 横向柱状体
     * @param xData
     * @param yDals
     *
     * @returns
     * */
    function barOptionTransverseFun(xData, yData) {
        return {
            title:{
                text:'生产企业采购订单笔数统计',
                textStyle:{
                    color:'#ffffff',
                    fontSize:"14"
                }
            },
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              
            },
            yAxis: [{
                type: 'category',
                data: xData,
                inverse: true,
                splitLine: {show: false},
                axisTick: {
                    alignWithLabel: true
                   
                },
                axisLine: {
                    lineStyle: {
                         type: '',
                         color: '',//左边线的颜色
                         width:''//坐标线的宽度
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#33cc99',//坐标值得具体的颜色

                    }
                }

            }],
            xAxis: [{
                type: 'value',
                show:false,
                axisLine: {
                    lineStyle: {
                        type: '',
                        color:'',
                        width:''
                    }
                },
                splitLine: {show: false},
                axisLabel: {
                    textStyle: {
                        color: '#33cc99'
                    }
                }
            }],
            series: [{
                name: '采购订单笔数',
                type: 'bar',
                barWidth: '60%',
                data: yData,
                color:'#33cc99',
                label:{
                    normal:{
                        show:true,
                        position:'right'
                    }
                }
               
                

            }]

        }
    };

</script>
</body>
</html>






